// AxiomNumber 组件样式
.axiom-number {
  display: flex;
  flex-direction: column;
  gap: var(--axiom-number-gap);
  
  // 标签样式
  &__label {
    font-size: var(--axiom-number-label-font-size);
    font-weight: var(--axiom-number-label-weight);
    color: var(--axiom-number-label-color);
    font-family: var(--font-family-base);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: var(--axiom-number-label-letter-spacing);
  }
  
  // 主体容器
  &__main {
    display: flex;
    align-items: baseline;
    gap: var(--axiom-number-main-gap);
    flex-wrap: wrap;
  }
  
  // 前缀样式
  &__prefix {
    font-size: var(--axiom-number-prefix-font-size);
    color: var(--axiom-number-prefix-color);
    font-family: var(--font-family-base);
    font-weight: 500;
  }
  
  // 数字值样式
  &__value {
    font-size: var(--axiom-number-value-font-size);
    font-weight: var(--axiom-number-value-font-weight);
    color: var(--axiom-number-value-color);
    font-family: var(--font-family-heading);
    line-height: 1;
    transition: color 0.3s ease;
    
    // 趋势颜色
    &--positive {
      color: var(--success-color);
    }
    
    &--negative {
      color: var(--danger-color);
    }
    
    &--neutral {
      color: var(--text-color);
    }
  }
  
  // 后缀样式
  &__suffix {
    font-size: var(--axiom-number-suffix-font-size);
    color: var(--axiom-number-suffix-color);
    font-family: var(--font-family-base);
    font-weight: 500;
  }
  
  // 趋势指示器
  &__trend {
    display: flex;
    align-items: center;
    gap: var(--axiom-number-trend-gap);
    margin-left: var(--axiom-number-trend-margin-left);
  }
  
  &__trend-icon {
    width: var(--axiom-number-trend-icon-size);
    height: var(--axiom-number-trend-icon-size);
    
    // 根据父元素的趋势类设置颜色
    .axiom-number__value--positive + .axiom-number__trend & {
      color: var(--success-color);
    }
    
    .axiom-number__value--negative + .axiom-number__trend & {
      color: var(--danger-color);
    }
  }
  
  &__trend-value {
    font-size: var(--axiom-number-trend-value-font-size);
    font-weight: var(--axiom-number-trend-value-font-weight);
    font-family: var(--font-family-base);
    
    // 根据父元素的趋势类设置颜色
    .axiom-number__value--positive + .axiom-number__trend & {
      color: var(--success-color);
    }
    
    .axiom-number__value--negative + .axiom-number__trend & {
      color: var(--danger-color);
    }
  }
  
  // 描述文本
  &__description {
    font-size: var(--axiom-number-description-font-size);
    color: var(--axiom-number-description-color);
    font-family: var(--font-family-base);
    line-height: 1.4;
    margin-top: var(--axiom-number-description-margin-top);
  }
  
  // 额外信息
  &__extra {
    margin-top: var(--axiom-number-extra-margin-top);
  }
  
  // 尺寸变体
  &--small {
    .axiom-number__label {
      font-size: var(--axiom-number-sm-label-font-size);
    }
    
    .axiom-number__value {
      font-size: var(--axiom-number-sm-value-font-size);
    }
    
    .axiom-number__prefix,
    .axiom-number__suffix {
      font-size: var(--axiom-number-sm-prefix-suffix-font-size);
    }
    
    .axiom-number__trend-icon {
      width: var(--axiom-number-sm-trend-icon-size);
      height: var(--axiom-number-sm-trend-icon-size);
    }
    
    .axiom-number__trend-value {
      font-size: var(--axiom-number-sm-trend-value-font-size);
    }
    
    .axiom-number__description {
      font-size: var(--axiom-number-sm-description-font-size);
    }
  }
  
  &--large {
    .axiom-number__label {
      font-size: var(--axiom-number-lg-label-font-size);
    }
    
    .axiom-number__value {
      font-size: var(--axiom-number-lg-value-font-size);
    }
    
    .axiom-number__prefix,
    .axiom-number__suffix {
      font-size: var(--axiom-number-lg-prefix-suffix-font-size);
    }
    
    .axiom-number__trend-icon {
      width: var(--axiom-number-lg-trend-icon-size);
      height: var(--axiom-number-lg-trend-icon-size);
    }
    
    .axiom-number__trend-value {
      font-size: var(--axiom-number-lg-trend-value-font-size);
    }
    
    .axiom-number__description {
      font-size: var(--axiom-number-lg-description-font-size);
    }
  }
  
  // 变体样式
  &--card {
    padding: var(--axiom-number-card-padding);
    background-color: var(--axiom-number-card-bg);
    border: var(--axiom-number-card-border);
    border-radius: var(--axiom-number-card-radius);
    box-shadow: var(--axiom-number-card-shadow);
    transition: all 0.3s ease;
    
    &:hover {
      border-color: var(--axiom-number-card-hover-border-color);
      box-shadow: var(--axiom-number-card-hover-shadow);
    }
  }
  
  &--minimal {
    .axiom-number__label {
      display: none;
    }
    
    .axiom-number__description {
      display: none;
    }
    
    .axiom-number__main {
      justify-content: center;
    }
  }

  // 特殊数字格式样式
  // 货币样式
  &--currency {
    .axiom-number__value {
      color: var(--success-color);
    }
  }
  
  // 百分比样式
  &--percentage {
    .axiom-number__value {
      color: var(--primary-color);
    }
  }
  
  // 统计样式
  &--statistic {
    text-align: center;
    
    .axiom-number__main {
      justify-content: center;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .axiom-number {
    &--large {
      .axiom-number__value {
        font-size: var(--axiom-number-responsive-lg-value-font-size);
      }
    }
    
    &--default {
      .axiom-number__value {
        font-size: var(--axiom-number-responsive-default-value-font-size);
      }
    }
    
    &--card {
      padding: var(--axiom-number-responsive-card-padding);
    }
  }
}